<template>
  <div id="map">
    <TopBar :queryEvent="handleQueryEvent" />
    <LayersComponent />
    <TableComponent/>
    <!-- <TableComponent /> -->
  </div>
  <button id="btn" @click="handleMapChange">Change Map</button>
</template>

<script setup>
import {  onMounted, getCurrentInstance } from "vue"
import { useInitMapHook } from "./hooks/useInitMapHook"
import TopBar from "@/components/common/TopBar.vue"
import LayersComponent from "@/components/common/LayersComponent.vue"
import TableComponent from "@/components/common/TableComponent.vue"

const { gaode, image } = useInitMapHook()
let mymap

onMounted(() => {
  const { proxy } = getCurrentInstance()

  const navControl = new ol.control.ZoomToExtent({
    extent: [100, 30, 140, 30],
  })

  const zoomslider = new ol.control.ZoomSlider()

  const overviewMapControl = new ol.control.OverviewMap({
    className: "ol-overviewmap ol-custom-overviewmap",
    layers: [gaode],
    collapseLabel: "\u00BB",
    label: "\u00AB",
    collapsed: false,
    view: new ol.View({
      projection: "EPSG:4326",
      minZoom: 8,
      maxZoom: 18,
    }),
  })

  const overviewMapControl01 = new ol.control.OverviewMap({
    className: "ol-overviewmap01",
    target: document.getElementById("btn"),
    layers: [gaode],
    collapseLabel: "\u00BB",
    label: "\u00AB",
    collapsed: false,
    view: new ol.View({
      projection: "EPSG:4326",
      minZoom: 12,
      maxZoom: 18,
    }),
  })

  const overviewMapControl02 = new ol.control.OverviewMap({
    className: "ol-overviewmap02",
    target: document.getElementById("btn"),
    layers: [image],
    collapseLabel: "\u00BB",
    label: "\u00AB",
    collapsed: false,
    view: new ol.View({
      projection: "EPSG:4326",
      minZoom: 12,
      maxZoom: 18,
    }),
  })

  mymap = proxy.$map
  mymap.addControl(navControl)
  mymap.addControl(zoomslider)
  mymap.addControl(overviewMapControl)
  mymap.addControl(overviewMapControl01)
  mymap.addControl(overviewMapControl02)
})

const handleQueryEvent = () => {
  let source = new ol.source.Vector({})
  let layer = new ol.layer.Vector({
    source,
  })
  console.log(mymap)
  mymap.addLayer(layer)
  let draw = createDraw({
    type: "Box",
    source,
    success: (feature) => {
      let service = {
        name: "guanggu",
        layerId: 2,
      }
      let geometry = feature.getGeometry()
      /* 1、设置要素的查询构建 geoemetry,style,attr */
      var queryStruct = new Zondy.Service.QueryFeatureStruct()
      //是否包含几何图形信息
      queryStruct.IncludeGeometry = true
      //是否包含属性信息
      queryStruct.IncludeAttribute = true
      //是否包含图形显示参数
      queryStruct.IncludeWebGraphic = false
      /* 2、设置查询的规则 */
      //指定查询规则
      var rule = new Zondy.Service.QueryFeatureRule({
        //是否将要素的可见性计算在内
        EnableDisplayCondition: false,
        //是否完全包含
        MustInside: false,
        //是否仅比较要素的外包矩形
        CompareRectOnly: false,
        //是否相交
        Intersect: true,
      })
      /* 3、设置查询参数 */
      //实例化查询参数对象
      var geomObj = new Zondy.Object.Polygon()
      //feature.getGeometry()
      geomObj.setByOL(geometry)
      var queryParam = new Zondy.Service.QueryParameter({
        geometry: geomObj,
        resultFormat: "json",
        struct: queryStruct,
        rule: rule,
      })
      var queryService = new Zondy.Service.QueryDocFeature(
        queryParam,
        service.name,
        service.layerId,
        {}
      )
      //执行查询操作，querySuccess为查询回调函数
      queryService.query(querySuccess)

      source.clear()
    },
  })
  mymap.addInteraction(draw)
}

function querySuccess(data) {
  console.log(data)
  
}

const handleMapChange = () => {
  mymap.getLayers().forEach((layer) => {
    if (layer === gaode) {
      mymap.removeLayer(gaode)
      mymap.addLayer(image)
    } else if (layer === image) {
      mymap.removeLayer(image)
      mymap.addLayer(gaode)
    }
  })
}
</script>

<style lang="scss" scoped>
div {
  padding: 0;
  margin: 0;
}

:deep(.ol-zoomslider) {
  top: 200px;
}

:deep(.ol-zoom-extent) {
  top: 140px;
}

:deep(.ol-zoom) {
  top: 70px;
}

:deep(.ol-control) {
  background-color: crimson;
}

#map {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

:deep(.ol-overviewmap01) {
  right: 300px;
  bottom: 20px;
}

:deep(.ol-overviewmap02) {
  right: 50px;
  bottom: 20px;
}

:deep(.ol-overviewmap-map) {
  height: 200px;
  width: 200px;
}
</style>
